#commentPage(pageSize=6)
### 评论列表
<div class="p-comment-box" id="p-comment-box">
    <form id="commentForm" onsubmit="return false">
        <div class="f-reply-box">
            #if(!loginUser)
            <div class="f-reply-box-input">
                <input name="userName" type="text" class="p-comment-input" autocomplete="off" placeholder="昵称:请输入昵称(必填)">
                <input name="email" type="text" class="p-comment-input"  autocomplete="off" placeholder="邮箱:请输入邮箱(必填)">
                <input name="website" type="text" class="p-comment-input" autocomplete="off" placeholder="网址:请输入网址(选填)">
            </div>
            #end
            <textarea class="p-comment" id="content" name="content" placeholder="说点什么吧?"></textarea>
            <input type="hidden" name="pid" id="pid">
            <input type="hidden" name="topPid" id="topPid">
            <input type="hidden" name="articleId" value="#(article.id??)" id="articleId">
            <input type="hidden" name="url" value="#(article.url??)" id="url">
            <div class="p-form-item">
                <a class="p-comment-emoji-btn  waves-effect" id="p-comment-emoji-btn">OωO</a>
                <a class="p-cancel-reply">取消</a>
                <button class="p-submit-comment  waves-effect" type="submit" id="submitComment">提交评论</button>
            </div>
            <div class="p-comment-emoji-box">
                <div class="p-comment-emoji-panel">
                    <ul>
                        <li class="waves-effect">|´・ω・)ノ</li>
                        <li class="waves-effect">ヾ(≧∇≦*)ゝ</li>
                        <li class="waves-effect">(☆ω☆)</li>
                        <li class="waves-effect">（╯‵□′）</li>
                        <li class="waves-effect">￣﹃￣</li>
                        <li class="waves-effect">(/ω＼)</li>
                        <li class="waves-effect">→_→</li>
                        <li class="waves-effect">(ノ°ο°)ノ</li>
                        <li class="waves-effect">⌇●﹏●⌇</li>
                        <li class="waves-effect">(ฅ´ω`ฅ)</li>
                        <li class="waves-effect">φ(￣∇￣o)</li>
                        <li class="waves-effect">ヾ(´･ ･｀｡)ノ"</li>
                        <li class="waves-effect">(ó﹏ò｡)</li>
                        <li class="waves-effect">Σ(っ °Д °;)っ</li>
                        <li class="waves-effect">( ,,´･ω･)ﾉ</li>
                        <li class="waves-effect">╮(╯▽╰)╭</li>
                        <li class="waves-effect">(｡•ˇ‸ˇ•｡)</li>
                        <li class="waves-effect">＞﹏＜</li>
                        <li class="waves-effect">( ๑´•ω•)</li>
                        <li class="waves-effect">"(´っω･｀｡)</li>
                        <li class="waves-effect">"(ㆆᴗㆆ)</li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="p-comment-list-box" id="commentListBox">
    <span id="commentAnchor" class="comment-anchor"></span>
    <div id="commentList">
        #for(comment : commentPage.data)
            <div class="p-comment-item p-comment-parent">
                <span id="comment-#(comment.id)" class="comment-anchor"></span>
                <img src="#(isBlank(comment.avatar) ? '/static/public/images/user.png' : comment.avatar.replace('http://www.gravatar.com/','https://gravatar.loli.net/'))" class="p-comment-avatar">
                <div class="p-comment-right">
                    <div class="p-comment-meta">
                        <span class="p-comment-name">#(comment.userName??)</span>
                        <span class="p-comment-time">#timeAgo(comment.createTime)</span>
                    </div>
                    <div class="p-comment-content">
                        #(comment.content ??)
                    </div>
                    <div class="p-comment-reply">
                        <a class="p-comment-reply-btn" data-pid="#(comment.id)" data-topPid="#(comment.id)">
                            <i class="iconfont icon-comment"></i>回复
                        </a>
                    </div>

                    #if(comment.child)
                    #for(childComment : comment.child)
                    <div class="p-comment-item">
                        <span id="comment-#(childComment.id)" class="comment-anchor"></span>
                        <img src="#(isBlank(childComment.avatar) ? '/static/public/images/user.png' : childComment.avatar.replace('http://www.gravatar.com/','https://gravatar.loli.net/'))" class="p-comment-avatar">
                        <div class="p-comment-right">
                            <div class="p-comment-meta">
                                <span class="p-comment-name">#(childComment.userName??)</span>
                                <span class="p-comment-time">#timeAgo(childComment.createTime)</span>
                            </div>
                            <div class="p-comment-content">
                                <a class="p-reply-user" href="#comment-#(childComment.parent.id??)">@#(childComment.parent.userName??)</a> #(childComment.content ??)
                            </div>
                            <div class="p-comment-reply">
                                <a class="p-comment-reply-btn" data-pid="#(childComment.id)" data-topPid="#(comment.id)">
                                    <i class="iconfont icon-comment"></i>回复
                                </a>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    #end
                    #end
                </div>
                <div class="clear"></div>
            </div>
        #end
    </div>
</div>

#pageRender(commentPage, anchor="#commentAnchor",preText="上一页",nextText="下一页")
#end